import React, {useEffect, useState} from "react";
import {Button, Progress, Space, Switch, Table} from "antd";
import {PlusOutlined, RedoOutlined} from "@ant-design/icons";
import {ColumnsType} from "antd/es/table";

interface StorageSource {
    title: string;       // 名称
    storageType: string; // 源类型
    brief: string;       // 备注
    createTime: string;  // 创建时间
    isDefault: boolean;  // 是否默认
    capacity: number;    // 容量
    usedSize: number;    // 使用大小
}


export const SourcePage = () => {

    const columns: ColumnsType<StorageSource> = [
        {
            key: 'title',
            title: '名称',
            dataIndex: 'title',
            align: 'center',
            width: '15%',
        },
        {
            key: 'storageType',
            title: '存储源',
            dataIndex: 'storageType',
            align: 'center',
            width: '10%',
        },
        {
            key: 'createTime',
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            width: '10%',
            ellipsis: true
        },
        {
            key: 'isDefault',
            dataIndex: 'isDefault',
            title: '默认',
            align: 'center',
            width: '10%',
            render: (isDefault) => <Switch checkedChildren="默认" unCheckedChildren="常规" defaultChecked={isDefault} />
        },
        {
            key: 'capacity',
            dataIndex: 'capacity',
            title: '使用情况',
            align: 'center',
            width: '20%',
            render: (capacity, record) => <Progress percent={capacity / record.usedSize} size="small" />
        },
        {
            key: 'brief',
            title: '备注',
            dataIndex: 'brief',
            ellipsis: true
        },
        {
            key: 'action',
            title: '操作',
            align: 'center',
            width: '20%',
            render: (text, record) => <Space>
                <Button size={'small'} type={"primary"} style={{borderColor: '#8c8c8c', backgroundColor: '#8c8c8c'}}>停用</Button>
                <Button size={'small'} type={"primary"}>修改</Button>
                <Button size={'small'} type={"primary"} style={{borderColor: '#ff7875', backgroundColor: '#ff7875'}}>删除</Button>
            </Space>
        }
    ]

    const [dataSource, setDataSource] = useState<StorageSource[]>([
        {
            title: '阿里云对象存储',
            storageType: '阿里云',
            brief: '系统默认的存储源',
            createTime: '2021-10-1 10:10:10',
            isDefault: true,
            capacity: 40,
            usedSize: 1,
        },
        {
            title: '七牛云对象存储',
            storageType: '七牛云',
            brief: '备用的存储源',
            createTime: '2021-10-11 11:10:10',
            isDefault: false,
            capacity: 40,
            usedSize: 2,
        }
    ])


    useEffect(() => {
        document.title = '聚合云盘：存储源'
    }, [])


    return <div style={{paddingTop: '5px'}}>
        <Space style={{marginBottom: '8px'}}>
            <Button type="primary" size={'small'} icon={<PlusOutlined />}>增加</Button>
            <Button type="primary" size={'small'} icon={<RedoOutlined />} style={{borderColor: '#fa8c16', backgroundColor: '#fa8c16'}}>刷新</Button>
        </Space>
        <Table bordered size={"small"} dataSource={dataSource} columns={columns} pagination={false} />
    </div>
}

